<template>
  <div class="main" style="height: 100%;">
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div>
        <el-select size="small" v-model="params.area" filterable placeholder="请选择省份">
          <el-option v-for="item in provinceOptions" :key="item.area" :label="item.areaName"
                     :value="item.area">
          </el-option>
        </el-select>
        <el-select style="margin:0 20px" size="small" v-model="params.type" filterable placeholder="请选择费用类型">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="searchList">查询</el-button>
      </div>
      <div>
        <el-button size="small" type="primary" @click="ledgerStatus = true">新增记录</el-button>
      </div>
    </div>
    <div style="margin-top: 20px; height: calc(100% - 120px);overflow: scroll;">
      <el-table :data="dataList" border show-summary style="overflow: auto;" :headerCellStyle="{
'textAlign': 'center',
'fontWeight': 400,
'background': '#66b1ff',
'color': 'white',
}" :cellStyle="{
'textAlign': 'center',
'fontSize': '12px'
}">
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column prop="areaName" label="仓库"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column label="凭证">
          <template slot-scope="scope">
            <div v-if="scope.row.imgs">
              <el-image v-for='(v, i) in scope.row.preImg' :key="i"
                        style="width: 50px; height: 50px"
                        ref="preview" :src="host+v" :preview-src-list="previewImg">
              </el-image>
            </div>
            <!-- <el-image v-if='props.row.imgs':src="'https://'+ props.row.imgs" style="width:50px;height:50px;"></el-image> -->
            <el-tag v-else>暂无凭证</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding-top: 20px;">
      <el-pagination style="border-top:1px solid #eee;padding-top: 20px;" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="params.pageNumber"
                     :page-sizes="[5,10,20, 30, 50]"
                     :page-size="20" layout="total, sizes, prev, pager, next, jumper" align="right" :total="totalCount">
      </el-pagination>
    </div>
    <el-dialog title="新增仓库台帐记录" :visible.sync="ledgerStatus" width="45%">
      <div style="display: flex;justify-content: space-between; align-items: center;">
        <el-select v-model="createForm.provinceId" style="width: 45%;" filterable placeholder="请选择省份">
          <el-option v-for="item in  provinceOptions " :key="item.area" :label="item.areaName"
                     :value="item.area">
          </el-option>
        </el-select>
        <el-select style="width: 45%;" v-model="createForm.typeId" filterable placeholder="请选择费用类型">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="margin: 20px 0 ;display: flex;justify-content: space-between; align-items: center;">
        <el-input-number style="width: 45%;" v-model="createForm.price"></el-input-number>
        <el-input style="width: 45%;" type="text" v-model="createForm.remark" placeholder="请输入备注"></el-input>
      </div>
      <div style="width: 45%;">
        <div style="width:80px;text-align: center;margin-top: 30px">新增图片：</div>
        <div class="div">
          <!--            <div>-->
          <!--              <upload title="" @imgUrl="getImageUrl" :clearImgUrl='afterVoucherClearImgUrl'-->
          <!--                      uploadType="drag" :multilineStatus="true" />-->
          <!--            </div>-->

          <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>
          <div v-for='(v, i) in preSalesImg' style="display: flex;">
            <el-image :key="i" style="width: 50px; height: 50px"
                      ref="preview" :src="host+v" :preview-src-list="preSalesImgList">
            </el-image>
            <div @click="deletePic(i)">
              <el-icon name="delete"></el-icon>
            </div>
          </div>
          <!--            <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>-->
          <!--            <el-image v-for='(v, i) in preSalesImg' :key="i" style="width: 50px; height: 50px"-->
          <!--                      ref="preview" :src="host+v" :preview-src-list="preSalesImgList">-->
          <!--            </el-image>-->
        </div>

        <!--                <upload uploadType="drag" @imgUrl="getUrl" title="费用凭证"></upload>-->
      </div>

      <span slot="footer" class="dialog-footer">
            <el-button @click="ledgerStatus = false">取 消</el-button>
            <el-button type="primary" @click="submitCreateForm">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>
<script>
import upload from '@/RayComponents/upload.vue'
import axios from 'axios';
export default {
  name: "AreaLedger",
  components: {
    upload
  },
  data() {
    return {
      apiName: "newAreaLedgerList",
      totalCount: 0,
      previewImg: [],
      host: this.$imgHost,
      preSalesImg: [],
      preSalesImgList: [],
      params: {
        pageNumber: 1,
        pageSize: 20,
        type: '',
        area: '',
      },
      ledgerStatus: false,
      typeId: '',
      typeOptions: [],
      provinceId: '',
      createForm: {
        typeId: '',
        provinceId: '',
        price: '',
        remark: ''
      },
      provinceOptions: [],
      dataList: []
    };

  },
  watch: {
// "$store.state.areaList": function (value) {
//     this.initItems();
// },
// "$store.state.areaLedgerType": function (value) {
//     this.initItems();
// },
  },
  mounted() {
    this.getCostType();
    this.getProvince();
    this.getList();
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    searchList() {
      this.params.pageNumber = 1;
      this.getList();
    },
    getList() {
      this.$api.areaLedgerAreaLedgerList(this.params).then(res => {
        this.totalCount = res.total;
        res.data.map(el => {
          if (el.imgs) {
            el.preImg = el.imgs.split(",")
            el.preImg.forEach(val => {
              this.previewImg.push('https://' + val)
            })
          }
        })
        this.dataList = res.data;
      })
    },
    getProvince() {
      this.$api.areaLedgerAreaList().then(res => {
        this.provinceOptions = res;
      })
    },
    getCostType() {
      this.$api.areaLedgerFyTypeList().then(res => {
        this.typeOptions = res;
      })
    },
    submitCreateForm() {
      console.log(this.createForm)
      for (let i in this.createForm) {
        if (this.createForm[i] == '') {
          this.$message.error('请检查信息!');
          return;
        }
      }
      let params = {
        type: this.createForm.typeId,
        remark: this.createForm.remark,
        area: this.createForm.provinceId,
        imgs: this.preSalesImg.toString(),
        amount: this.createForm.price
      }
      this.$api.areaLedgerAddAreaLedger(params).then(res => {
        this.$message({ message: "提交成功！", type: "success" })
        this.ledgerStatus = false;
        this.getList();
      })

    },
    handleSizeChange(e) {
      this.params.pageSize = e;
      this.getList();
    },
    handleCurrentChange(e) {
      this.params.pageNumber = e;
      this.getList();
    },
// getUrl(e) {
//     this.createForm.voucher = e[0];
// }
    deletePic(i) {
      this.preSalesImg.splice(i, 1)
    },
    handlePaste(event) {
      console.log(111)
      if (!this.ledgerStatus) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/common/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      })
        .then(response => {
          this.preSalesImg.push(response.data.result[0]);
          this.preSalesImgList.push('https://' + response.data.result[0]);
        })
        .catch(error => {
        });
    },

  }
};
</script>
<style lang="less" scoped>
/* 固定合计行的位置 */
.main /deep/ .el-table .el-table__footer-wrapper .cell {
  text-align: center;
}

</style>
